<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>网站日志统计</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>
  <link rel="stylesheet" href="${basePath}/resources/css/uniform.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/select2.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-style.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-media.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/admin/list.css" />

</head>

<body>

<!--Header-part-->
<%@include file="/WEB-INF/pages/common/head.jsp"%>


<!--sidebar-menu-->
<%@include file="/WEB-INF/pages/common/left.jsp"%>

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 首页</a> <a href="#" class="current">日志管理</a> </div>
    <%--<h1>日志管理</h1>--%>
  </div>

  <div class="container-fluid">

    <hr>
    <div class="row-fluid">
      <div class="span12">

        <%--<div class="widget-box">--%>
          <%--<div class="widget-content">--%>

            <%--&lt;%&ndash;<form method="post" id="searchForm">&ndash;%&gt;--%>
              <%--&lt;%&ndash;<div class="controls controls-row">&ndash;%&gt;--%>
                <%--&lt;%&ndash;<div class="span4 ">&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<span class="span4 m-wrap queryForm" >方法名:</span>&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<input type="text"  name="method"  placeholder="方法名" value="${params.method}" class="span8 m-wrap">&ndash;%&gt;--%>
                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
                <%--&lt;%&ndash;<div class="span4 ">&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<span class="span4 m-wrap queryForm" >访问路径:</span>&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<input type="text"  name="uri" placeholder="访问路径" class="span8 m-wrap " value="${params.uri}">&ndash;%&gt;--%>
                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
                <%--&lt;%&ndash;<div class="span4 ">&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<span class="span4 m-wrap queryForm" >截止时间:</span>&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<input type="text" name="endTime" placeholder="截止时间" class="span8 m-wrap" value="${params.endTime}">&ndash;%&gt;--%>
                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
              <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
              <%--&lt;%&ndash;<hr>&ndash;%&gt;--%>
              <%--&lt;%&ndash;<div class="controls controls-row">&ndash;%&gt;--%>
                <%--&lt;%&ndash;<div class="span12"  style="text-align: center">&ndash;%&gt;--%>
                  <%--&lt;%&ndash;<button   class="btn btn-success" onclick="tzAdmin.search()">查询</button>&ndash;%&gt;--%>
                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
              <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
            <%--&lt;%&ndash;</form>&ndash;%&gt;--%>

          <%--</div>--%>
        <%--</div>--%>

        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>Data table</h5>
            <a style="float: right;margin-top: 0.2rem" onclick="tzAdmin.search()" class="btn btn-success"><i class="icon-search icon-white"></i></a>

            <label style="float: right;margin-top: 0.2rem">
              <input type="text" id="keywords" aria-controls="DataTables_Table_0" placeholder="输入查询关键字">
            </label>

          </div>
          <div class="widget-content nopadding">
            <table class="table table-bordered data-table">
              <thead>

              <tr>
                <th>主键</th>
                <th>方法名 <span class="up"></span> <span class="down"></span></th>
                <th>访问路径 </th>
                <th>ip地址</th>
                <th>操作人</th>
                <th>访问时间</th>
                <th>停留时间(毫秒)</th>
                <%--<th>操作</th>--%>
              </tr>
              </thead>
              <tbody id="tbody" data-model="adminstat">
                  <tr>
                    <td id="loading" colspan="50"></td>
                  </tr>


              </tbody>
               <tfoot>

               </tfoot>
            </table>
            <div class="cpage"></div>

          </div>
        </div>
      </div>
    </div>
    <%--<div class="row-fluid">--%>
      <%--<div class="span12">--%>
        <%--<div class="widget-box">--%>
          <%--<div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>--%>
            <%--<h5>请选择年份</h5>--%>
            <%--<select onchange="loadData(this.value)" style="margin-top:0.2rem">--%>
              <%--<option>请选择</option>--%>
              <%--<c:forEach begin="2010" end="2020" var="year">--%>
                <%--<option value="${year}">${year}</option>--%>
              <%--</c:forEach>--%>
            <%--</select>--%>
          <%--</div>--%>
          <%--<div class="widget-content">--%>
            <%--<div id="main" style="height: 400px;"></div>--%>
            <%--<p>--%>
              <%--<input id="updateInterval" type="hidden" value="" style="text-align: right; width:5em">--%>
             <%--</p>--%>
          <%--</div>--%>
        <%--</div>--%>
      <%--</div>--%>
    <%--</div>--%>
  </div>
</div>

   <!--Footer-part-->
<%@include file="/WEB-INF/pages/common/footer.jsp"%>

<!--end-Footer-part-->

<%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
   <script type="text/javascript" src="${basePath}/resources/sg/tz_page.js"></script>
   <script src="${basePath}/resources/js/jquery.ui.custom.js"></script>
<script src="${basePath}/resources/js/bootstrap.min.js"></script>
<script src="${basePath}/resources/js/jquery.uniform.js"></script>
<script src="${basePath}/resources/js/select2.min.js"></script>
<script src="${basePath}/resources/js/jquery.dataTables.min.js"></script>
<script src="${basePath}/resources/js/matrix.js"></script>
<script src="${basePath}/resources/js/echart/echarts.js"></script>

<%--<script src="${basePath}/resources/js/matrix.tables.js"></script>--%>

   <script>
       $(function(){
         tzAdmin.loadData(0,10,function(itemCount){
           tzAdmin.initPage(itemCount);//分页加载一次吗
         });

         loadData(new Date().getFullYear());


       });


       function loadData(year){
         $.ajax({
           type:"post",
           url:adminPath+"/stat/list",
           data:{year:year},
           success:function(data){
             var json = {
               title:year+"年度金乐乐后台访问详情",
               datas:parseData(data)
             };
             initChart("main",json);
           }
         });
       };

       function parseData(jsonArr){
         var jsonObj = {};
         for(var key in jsonArr){
           var num = jsonArr[key].num;
           var m = jsonArr[key].m;
           jsonObj["s"+parseInt(m)]= num;
         };
         var arr = [];
         for(var i=1;i<=12;i++){
           arr.push(jsonObj["s"+i]||0);
         }
         return arr;
       }

       function initChart(targetId,json){
         require.config({
           paths: {
             echarts: basePath+'/resources/js/echart'
           }
         });
         require(
                 [
                   'echarts',
                   'echarts/chart/bar',
                   'echarts/chart/pie',
                   'echarts/chart/line'
                 ],
                 function (ec) {
                   var myChart = ec.init(document.getElementById(targetId));
                   var option  = {
                     title : {
                       x: "center",
                       text: json.title,
                       subtext: "月份/总数"
                     },
                     tooltip : {
                       trigger: 'axis'
                     },

                     toolbox: {
                       show : true,
                       feature : {
                         mark : {show: true},
                         dataView : {show: true, readOnly: false},
                         magicType : {show: true, type: ['line', 'bar']},
                         restore : {show: true},
                         saveAsImage : {show: true}
                       }
                     },

                     calculable : true,
                     xAxis : [
                       {
                         type : 'category',
                         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                       }
                     ],
                     yAxis : [
                       {
                         type : 'value'
                       }
                     ],
                     series : [
                       {
                         name:'访问人数',
                         type:'bar',
                         data:json.datas,
                         markPoint : {
                           data : [
                             {type : 'max', name: '最大值'},
                             {type : 'min', name: '最小值'}
                           ]
                         },
                         markLine : {
                           data : [
                             {type : 'average', name: '平均值'}
                           ]
                         }
                       }
                     ]
                   };
                   myChart.setOption(option);
                   var ecConfig = require('echarts/config');
                   myChart.on(ecConfig.EVENT.CLICK, eConsole);
                 }
         );
       }


       function eConsole(param) {
         var mes = '【' + param.type + '】';
         if (typeof param.seriesIndex != 'undefined') {
           mes += '  seriesIndex : ' + param.seriesIndex;
           mes += '  dataIndex : ' + param.dataIndex;
         }
//         alert(JSON.stringify(param)+"==="+mes);
         // if (param.type == 'hover') {
         //     document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
         //}
         // else {
         //     document.getElementById('console').innerHTML = mes;
         //  }
         // console.log(param);
       }

   </script>

</body>
</html>
